<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title></title>
	<!--这里引入页面的样式-->
	<!--<link rel="stylesheet" href="../css/buyGoods.css">-->
	<style>
		.product-container {
			background-color:#f2f2f2;
		}

		.product-row {
			display: flex;
			flex-wrap: wrap;
			justify-content: space-between;
		}

		.product-item {
			margin-top: 10px;
			width: 85%;
			margin-bottom: 20px;
			margin-left: 10px;
			text-align: center;
			border: 1px solid #ccc;
			padding: 10px;
			margin-bottom: 10px;
			border-radius: 20px;
			background-color: white;
		}

		.product-image {
			width: 100%;
			height: auto;
		}

		.product-name {
			font-size: 14px;
			line-height: 20px;
			height: 40px;
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
		}

		.product-buttons {
			margin-top: 10px;
		}
		.product-price{
			color: red;
		}


		.block {
			display: flex;
			align-items: center; /* 垂直居中 */
		}
		a{
			list-style: none;
			text-decoration: none;
			color: gray;
		}
		.g1{
			float: left;
			width: 80px;
		}
		.el-carousel__item h3 {
			color: #475669;
			font-size: 14px;
			opacity: 0.75;
			line-height: 200px;
			margin: 0;
		}

		.el-carousel__item:nth-child(2n) {
			background-color: #99a9bf;
		}

		.el-carousel__item:nth-child(2n+1) {
			background-color: #d3dce6;
		}
		.el-carousel__item {
			position: relative;
		}

		.image-container {
			height: 200px;
			overflow: hidden;
		}

		.image-container img {
			width: 100%;
			height: auto;
			object-fit: cover;
		}

	</style>
</head>
<!--引入相关的文件-->
<script src="../js/vue.js"></script>
<script src="../element-ui/lib/index.js"></script>
<link rel="stylesheet" href="../element-ui/lib/theme-chalk/index.css">
<script src="../js/axios-0.18.0.js"></script>
<body>
<div id="app">
	<div class="block">
		<img class="g1" src="../image/log.png">
		<span class="demonstration">24°超市频道分类</span>
		<el-cascader
				placeholder="食品饮料"
				:options="options"
				filterable @change="showGoodsByComId($event)"></el-cascader>
		&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
		<el-link target="_blank" :underline="false" @click="shoppingInfo">我的购物车</el-link>
		&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
		<el-link target="_blank" :underline="false" @click="orderInfo">我的订单</el-link>
		&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
		<el-link target="_blank" :underline="false" @click="member">24°会员</el-link>
		&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
		<el-link href="SupInfo.html" target="_blank" :underline="false">24°简介</el-link>

		<el-link target="_blank" :underline="false" @click="collectInfo">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;我的收藏</el-link>
		&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
		<el-link target="_blank" :underline="false" @click="userInfo">个人中心</el-link>
		&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
		&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
		&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
		&nbsp;&nbsp;&nbsp;&nbsp;
		<div class="demo-type">
			<div>
				<el-avatar> user </el-avatar>
			</div>
		</div>
		&nbsp;&nbsp;&nbsp;
		<a id="uname" href="javascript:void(0)">Lydia</a>
		&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
		<el-link href="../login.html" target="_blank" :underline="false">退出系统</el-link>
	</div>



	<el-carousel :interval="4000" type="card" height="200px">
		<el-carousel-item v-for="(item, index) in images" :key="index">
			<div class="image-container">
				<img :src="item" alt="Image">
			</div>
		</el-carousel-item>
	</el-carousel>
	<div>
		<el-row>
			<el-col :span="4">
				<el-menu
						default-active="all"
						unique-opened
						:default-openeds="['1']"
				>
					<el-submenu index="1">
						<template slot="title">全部分类</template>
						<el-menu-item v-for="category in categories" @click="showGoodsByTypeId(category.typeId)">
							{{category.typeName}}
						</el-menu-item>
					</el-submenu>
				</el-menu>
			</el-col>
			<div class="product-container">
				<el-row class="product-row">
					<el-col :span="6" v-for="product in displayedProducts" :key="product.commodity_id">
						<div class="product-item">
							<img :src="product.commodityPic.split(';')[0]" class="product-image"  @click="showGoodsInfo(product.commodityId)">
							<p class="product-name">{{ product.commodityName }}</p>
							<p class="product-price">￥{{product.price}}</p>
							<p class="product-buttons">
								<el-button type="text" class="button" icon="el-icon-star-off" @click="addCollect(product.commodityId)">添加收藏</el-button>
								<el-button type="text" class="button" icon="el-icon-goods" id="shopping" @click="addShoppingCard(product.commodityId)">加购物车</el-button>
							</p>
						</div>
					</el-col>
				</el-row>
			</div>

		</el-row>
	</div>
</div>
<!--<el-col :span="20">
            <el-card v-for="product in displayedProducts" :key="product.commodity_id">
                <img :src="product.commodityPic" alt="商品图片">
                <p>{{ product.commodityName }}</p>
                <span>价格：{{ product.price }}</span>
            </el-card>
        </el-col>-->
<script>
	// 创建一个vue的实例对象,里面写那些数据和方法(一个是页面加载完后自动执行的方法，一个是其他操作后执行的代码)
	// 创建 Vue 实例

	var v = new Vue({
		el: '#app',
		data() {
			return {
				images: [
					'../image/b1.jpg',
					'../image/b2.jpg',
					'../image/b3.jpg',
					'../image/b4.jpg',
					'../image/b5.jpg',
					'../image/b6.jpg'
				],
				options: [{
					value: 'zhinan',
					label: '指南',
					children: [{
						value: 'shejiyuanze',
						label: '设计原则',
					}, {
						value: 'daohang',
						label: '导航',
					}]
				}, {
					value: 'zujian',
					label: '组件',
					children: [{
						value: 'basic',
						label: 'Basic',
					}, {
						value: 'form',
						label: 'Form',
					}, {
						value: 'data',
						label: 'Data',
					}, {
						value: 'notice',
						label: 'Notice',
					}, {
						value: 'navigation',
						label: 'Navigation',
					}, {
						value: 'others',
						label: 'Others',
					}]
				}, {
					value: 'ziyuan',
					label: '资源',
					children: [{
						value: 'axure',
						label: 'Axure Components'
					}, {
						value: 'sketch',
						label: 'Sketch Templates'
					}, {
						value: 'jiaohu',
						label: '组件交互文档'
					}]
				}],
				categories: [],
				displayedProducts: [],
				a:[]
			};

		},
		methods: {
			member(){

				axios.get('../users?op=MemberById&userName='+unameValue)
						.then(response => {
							console.log(response.data+"++++++++++++");
							if(response.data>0){
								window.location.href="memberInfo.html?userName="+unameValue;
							}
							else {
								window.location.href="member.html?userName="+unameValue;
							}
						})
			},
			userInfo(){
				window.location.href="userInfo.html?userName="+unameValue;
			},
			fetchActiveTabsList() {
				// 使用 axios 发送请求获取商品分类数据
				axios.get('../users?op=Goodslist')
						.then(response => {
							/*this.displayedProducts = response.data.data;*/
							const data = response.data.data
							this.a = data
							//console.log(data);
							this.options=data.map(item=>({
								label:item.typeName,
								value:item.typeId
							}));
							//console.log(this.options);
							let list =new Array();
							for(let i =0;i<data.length;i++){
								let item =data[i];
								let obj ={
									label:item.typeName,
									value:item.typeId
								};
								let types=item.commodityList;
								let arr =new Array();
								for(let j=0;j<types.length;j++){
									let o ={
										label:types[j].commodityName,
										value:types[j].commodityId
									};
									arr.push(o);
								}
								obj['children']=arr;
								list.push(obj);

							}
							this.options = list;



							/*this.options=data.map(item=>({
								label: item.typeName,
								value: item.typeId,
								children: [{value: item.commodityList[1].commodityId,
									label: item.commodityList[1].commodityName
								},{value: item.commodityList[0].commodityId,
									label: item.commodityList[0].commodityName
								},{value: item.commodityList[2].commodityId,
									label: item.commodityList[2].commodityName
								},{value: item.commodityList[3].commodityId,
									label: item.commodityList[3].commodityName
								},{value: item.commodityList[4].commodityId,
									label: item.commodityList[4].commodityName
								}]
							}))
*/

							//console.log(this.a)
						/*	const targetData = data.map(item => {
								const typeId = item.typeId.toString();
								const typeName = item.typeName;
								const commodityList = item.commodityList.map(commodity => {
									const commodityId = commodity.commodityId.toString();
									const commodityName = commodity.commodityName;
									return { value: commodityId, label: commodityName };
								});
								return { value: typeId, label: typeName, children: commodityList };
							});*/
						//	this.a = targetData;
							/*console.log(a);*/
						})
			},
			fetchActiveTabs(){
				// 使用 axios 发送请求获取商品分类数据
				axios.get('../users?op=Goodsf')
						.then(response => {
							this.displayedProducts = response.data.data;
						})
			},
			fetchCategories() {
				// 使用 axios 发送请求获取商品分类数据
				axios.get('../users?op=Productsfind')
						.then(response => {
/*
							this.categories=response.data.data
*/
							const data = response.data.data
							this.categories = data
							/*this.options=data.map(item=>({
								label: item.typeName,
								value: item.typeId,
							}))*/
							/*console.log(this.options)*/
/*
							console.log(this.categories)
*/
						})
			},
			showGoodsByTypeId:function (id){
				console.log(id)
				axios.get('../users?op=Goodsfind&typeId=' + id)
						.then(response => {
							/*this.displayedProducts = response.data.data;*/
							const data1 = response.data.data
							/*console.log(response+"++++++++++++++")*/
							/*console.log($event.target.value+"=++++++++")*/
							this.displayedProducts=data1
							/*this.options[0].children=data1.map(item=>({
								label: item.commodityName,
								value: item.commodityId
							}))*/
						})
				this.$forceUpdate()
				//console.log(this.categories.typeId);
			},
			showGoodsByComId:function (id) {console.log(100000002+id);
				axios.get('../users?op=Goodsfindbyid&commodityId=' + id[1])
						.then(response => {
							const data3 = response.data.data
							this.displayedProducts = data3
						})
			},

			collectInfo:function (){
				let uidValue = null; // 在函数内部定义 uidValue 变量
				console.log(unameValue);
				axios.get('../users?op=UsersInfoByName&userName=' + unameValue)
						.then(Response => {
									console.log("++++++" + Response.data.data[0].userId);
									uidValue = Response.data.data[0].userId;
							window.location.href="collectInfo.html?userName="+unameValue+'&userId='+uidValue;
						});
			},
			addCollect:function (id){
				let uidValue = null; // 在函数内部定义 uidValue 变量
				console.log(unameValue);
				axios.get('../users?op=UsersInfoByName&userName=' + unameValue)
						.then(Response => {
									console.log("++++++" + Response.data.data[0].userId);
									uidValue = Response.data.data[0].userId;

									axios.get('../users?op=Collect&commodityId=' + id + '&userId=' + uidValue)
											.then(Response => {
												console.log(Response);
												if (Response.data > 0) {
													alert("添加收藏成功！！！");
												} else {
													alert("不可以重复添加！！！");
												}
											});
						});

			},

			addShoppingCard: function (id) {
				let uidValue = null; // 在函数内部定义 uidValue 变量
				console.log(unameValue);
				axios.get('../users?op=UsersInfoByName&userName=' + unameValue)
						.then(Response => {
							console.log("++++++" + Response.data.data[0].userId);
							uidValue = Response.data.data[0].userId;
							/*axios.get('../users?op=addShoppingCard&productId=' + id + '&userId=' + uidValue)
									.then(Response => {
										console.log(Response);
										if (Response.data > 0) {
											alert("添加购物车成功！！！");
										} else {
											alert("添加失败！！！");
										}
									});*/


									axios.get('../users?op=ShoppingCard&productId=' + id + '&userId=' + uidValue)
											.then(Response => {
												console.log(Response);
												if (Response.data > 0) {
													alert("添加购物车成功！！！");
												} else {
													alert("添加失败！！！");
												}
											});





							// 第一次请求：查询购物车记录是否存在
		/*axios.get('../users?op=queryShoppingCard&productId=' + id + '&userId=' + uidValue)
				.then(response => {
					console.log("++"+response.data);
					if (response.data) {
						// 存在记录，执行更新操作
						axios.get('../users?op=queryQuantity&productId=' + id + '&userId=' + uidValue)
								.then(response => {
									const quantity = response.data;
									// 执行更新操作
									axios.get('../users?op=updateShoppingCard&productId=' + id + '&userId=' + uidValue + '&quantity=' + (quantity + 1))
											.then(response => {
												console.log(response);
												if (response.data > 0) {
													alert('添加购物车成功！');
												} else {
													alert('添加失败！');
												}
											})
											.catch(error => console.error(error));
								})
								.catch(error => console.error(error));
					} else {
						// 不存在记录，执行插入操作
						axios.get('../users?op=addShoppingCard&productId=' + id + '&userId=' + uidValue)
								.then(response => {
									console.log(response);
									if (response.data > 0) {
										alert('添加购物车成功！');
									} else {
										alert('添加失败！');
									}
								})
								.catch(error => console.error(error));
					}
				})
				.catch(error => console.error(error));*/

						});







			},
			showGoodsInfo:function(id){
				let uidValue = null; // 在函数内部定义 uidValue 变量
				console.log(unameValue);
				axios.get('../users?op=UsersInfoByName&userName=' + unameValue)
						.then(Response => {
							console.log("++++++" + Response.data.data[0].userId);
							uidValue = Response.data.data[0].userId;
							console.log(id);
							window.location.href="goodsInfo.html?id="+id+'&userName='+unameValue+'&userId='+uidValue;
						});

			},
			shoppingInfo: function() {
				let uidValue = null; // 在函数内部定义 uidValue 变量
				console.log(unameValue);
				axios.get('../users?op=UsersInfoByName&userName=' + unameValue)
						.then(Response => {
							console.log("++++++" + Response.data.data[0].userId);
							uidValue = Response.data.data[0].userId;
							console.log(uidValue + "==================");

							// 在获取到 uidValue 后进行页面跳转
							window.location.href = "buy.html?userName=" + unameValue + "&userId=" + uidValue;
						});
			},
			orderInfo:function (){
				let uidValue = null; // 在函数内部定义 uidValue 变量
				console.log(unameValue);
				axios.get('../users?op=UsersInfoByName&userName=' + unameValue)
						.then(Response => {
							console.log("++++++" + Response.data.data[0].userId);
							uidValue = Response.data.data[0].userId;
							console.log(uidValue + "==================");
							localStorage.setItem('uid', uidValue);
							// 在获取到 uidValue 后进行页面跳转
							window.location.href = "userOrder.html?userName=" + unameValue + "&userId=" + uidValue;
						});
			}

		},
		mounted(){
			this.fetchCategories();
			this.fetchActiveTabs();
			this.fetchActiveTabsList();
		}
	});

</script>
<script>
	// 获取URL参数函数
	function getParameterByName(name, url) {
		if (!url) url = window.location.href;
		name = name.replace(/[\[\]]/g, '\\$&');
		var regex = new RegExp('[?&]' + name + '(=([^&#]*)|&|#|$)'),
				results = regex.exec(url);
		if (!results) return null;
		if (!results[2]) return '';
		return decodeURIComponent(results[2].replace(/\+/g, ' '));
	}
	// 获取并展示uname的值
	var unameValue = getParameterByName('uname');
	if (unameValue) {
		document.getElementById('uname').innerHTML = unameValue;
	}
</script>
</body>
</html>